<script setup>
import { ref, onMounted } from 'vue';

// 统计数据
const stats = ref({
  totalUsers: 0,
  totalRegions: 0,
  totalCities: 0,
  totalSpots: 0,
  totalFoodGuides: 0,
  totalComments: 0
});

// 近期数据图表
const recentActivity = ref([]);
const monthlyVisitors = ref([]);

onMounted(() => {
  // 模拟获取统计数据
  fetchStats();
  fetchRecentActivity();
  fetchMonthlyVisitors();
});

const fetchStats = () => {
  // 模拟API调用
  setTimeout(() => {
    stats.value = {
      totalUsers: 1256,
      totalRegions: 6,
      totalCities: 42,
      totalSpots: 189,
      totalFoodGuides: 78,
      totalComments: 3245
    };
  }, 500);
};

const fetchRecentActivity = () => {
  // 模拟获取近期活动
  recentActivity.value = [
    { id: 1, user: '张三', action: '添加了新评论', target: '九寨沟景区', time: '10分钟前' },
    { id: 2, user: '李四', action: '收藏了地区', target: '云南', time: '30分钟前' },
    { id: 3, user: '王五', action: '注册了新账号', target: '', time: '1小时前' },
    { id: 4, user: '赵六', action: '发布了美食攻略', target: '成都火锅', time: '2小时前' },
    { id: 5, user: '钱七', action: '浏览了景点', target: '长城', time: '3小时前' }
  ];
};

const fetchMonthlyVisitors = () => {
  // 模拟月度访问数据
  monthlyVisitors.value = [
    { month: '1月', visitors: 3200 },
    { month: '2月', visitors: 3800 },
    { month: '3月', visitors: 4500 },
    { month: '4月', visitors: 5200 },
    { month: '5月', visitors: 6800 },
    { month: '6月', visitors: 7500 }
  ];
};
</script>

<template>
  <div>
    <div class="mb-6">
      <h2 class="text-2xl font-bold text-gray-900">仪表盘</h2>
      <p class="text-gray-600">系统概览和关键指标</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">用户总数</h3>
          <div class="mt-2 flex items-baseline text-3xl font-semibold text-primary">
            {{ stats.totalUsers }}
          </div>
          <div class="mt-1 text-sm text-green-600">
            <i class="fa fa-arrow-up"></i> 12% 较上月
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">地区总数</h3>
          <div class="mt-2 flex items-baseline text-3xl font-semibold text-primary">
            {{ stats.totalRegions }}
          </div>
          <div class="mt-1 text-sm text-green-600">
            <i class="fa fa-arrow-up"></i> 2% 较上月
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">景点总数</h3>
          <div class="mt-2 flex items-baseline text-3xl font-semibold text-primary">
            {{ stats.totalSpots }}
          </div>
          <div class="mt-1 text-sm text-green-600">
            <i class="fa fa-arrow-up"></i> 8% 较上月
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">美食攻略</h3>
          <div class="mt-2 flex items-baseline text-3xl font-semibold text-primary">
            {{ stats.totalFoodGuides }}
          </div>
          <div class="mt-1 text-sm text-green-600">
            <i class="fa fa-arrow-up"></i> 15% 较上月
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">评论总数</h3>
          <div class="mt-2 flex items-baseline text-3xl font-semibold text-primary">
            {{ stats.totalComments }}
          </div>
          <div class="mt-1 text-sm text-green-600">
            <i class="fa fa-arrow-up"></i> 20% 较上月
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">城市总数</h3>
          <div class="mt-2 flex items-baseline text-3xl font-semibold text-primary">
            {{ stats.totalCities }}
          </div>
          <div class="mt-1 text-sm text-gray-500">
            <i class="fa fa-minus"></i> 0% 较上月
          </div>
        </div>
      </div>
    </div>

    <!-- 图表和活动 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 访问量图表 -->
      <div class="bg-white shadow overflow-hidden rounded-lg lg:col-span-2">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">月度访问趋势</h3>
        </div>
        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
          <!-- 简单的图表展示，实际项目中可以使用Chart.js等库 -->
          <div class="h-64 bg-gray-50 rounded-md">
            <div class="flex h-full items-end justify-between px-4 pb-4">
              <div 
                v-for="item in monthlyVisitors" 
                :key="item.month"
                class="flex flex-col items-center"
              >
                <div 
                  class="bg-primary rounded-t-md transition-all hover:opacity-90"
                  :style="{ height: (item.visitors / 100) + '%' }"
                ></div>
                <span class="mt-1 text-xs text-gray-500">{{ item.month }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 近期活动 -->
      <div class="bg-white shadow overflow-hidden rounded-lg">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">近期活动</h3>
        </div>
        <div class="border-t border-gray-200">
          <ul class="divide-y divide-gray-200">
            <li 
              v-for="activity in recentActivity" 
              :key="activity.id"
              class="px-4 py-4 hover:bg-gray-50 transition-colors"
            >
              <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <i class="fa fa-user"></i>
                </div>
                <div class="ml-3">
                  <p class="text-sm text-gray-700">
                    <span class="font-medium">{{ activity.user }}</span>
                    <span class="text-gray-500">{{ activity.action }}</span>
                    <span v-if="activity.target" class="text-primary font-medium">
                      {{ activity.target }}
                    </span>
                  </p>
                  <p class="text-xs text-gray-500 mt-1">{{ activity.time }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #4f46e5;
}

.bg-primary {
  background-color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color);
}

.bg-primary\/10 {
  background-color: rgba(79, 70, 229, 0.1);
}
</style>